<template>
  <div class="app-container">

    <el-form :inline="true" :model="messagePageRequest" class="demo-form-inline" size="small">
      <el-form-item label="类型">
        <el-select v-model="messagePageRequest.type" clearable placeholder="请选择消息类型">
          <el-option label="通知" value="0"/>
          <el-option label="评分" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="messagePageRequest.isRead" clearable placeholder="请选择消息状态">
          <el-option label="全部" value="-1"/>
          <el-option label="未读" value="0"/>
          <el-option label="已读" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getMsgList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-card v-for="reply in list" :key="reply.id" class="box-card">
      <a @click="showMsg(reply.id)">
        <el-row :gutter="5">
          <el-col :span="18">
            <el-tag v-if="reply.isRead === 0" type="danger" size="mini">未读</el-tag>
            <el-tag v-if="reply.isRead === 1" type="info" size="mini">已读</el-tag>
            <el-tag v-if="reply.type === 0" size="mini">通知</el-tag>
            <el-tag v-if="reply.type === 1" type="success" size="mini">评分</el-tag>
            <span style="font-size: larger">{{ reply.title }}</span>
          </el-col>
          <el-col :span="6"><span style="font-size: small">{{ formatTime(reply.createTime) }}</span></el-col>
        </el-row>
      </a>
    </el-card>

    <br>

    <div class="block">
      <el-pagination
        v-if="!isMobile"
        :current-page="page"
        :page-sizes="[5, 10, 15, 30, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changSize"
        @current-change="changePage"/>
      <el-pagination
        v-else
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        small
        layout="prev, pager, next"
        @current-change="changePage"/>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="showNotice" :width="isMobile ? '80%' : '50%'" title="通知详情">
      <span v-html="content"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showNotice = false">我已知晓</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="showMark" :width="isMobile ? '80%' : '50%'" title="评分详情">
      <span v-text="content"/>
      <el-input-number
        v-model="markRequest.score"
        :min="0"
        :max="100"
        label="输入评分"
        size="small"
        controls-position="right"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showMark = false">取 消</el-button>
        <el-button :disabled="subFlag" :title="markTitle" type="primary" @click="submitMark">提 交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import teacherApi from '@/api/teacher/info'
import teacherReplyApi from '@/api/teacher/reply'
import store from '../../../store'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: 1,
      total: 0,
      pageSize: 10,
      LabelWidth: '80px',
      isMobile: false,

      messagePageRequest: {
        page: 1,
        limit: 10,
        type: null,
        isRead: null
      },

      showNotice: false,
      content: '',
      showMark: false,
      markMsg: null,
      subFlag: true,
      markTitle: '',
      markRequest: {
        score: 0,
        replyId: null,
        studentId: null
      }
    }
  },
  created() {
    this.isMobile = document.body.clientWidth <= 576
    this.getMsgList()
  },
  methods: {
    getMsgList() {
      this.listLoading = true
      this.messagePageRequest.page = this.page
      this.messagePageRequest.limit = this.pageSize
      teacherApi.getMessages(this.messagePageRequest).then(res => {
        this.listLoading = false
        this.total = Number.parseInt(res.result.counts)
        this.list = res.result.items
        if (this.$route.query.messageId !== null) {
          this.showMsg(this.$route.query.messageId)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    changSize(pageSize) {
      this.pageSize = pageSize
      this.getMsgList()
    },
    changePage(page) {
      this.page = page
      this.getMsgList()
    },
    formatTime(time) {
      const date = new Date(time)
      const today = new Date()
      const diff = (today.getTime() - date.getTime()) / 1000
      const dayDiff = Math.floor(diff / 86400)

      if (isNaN(dayDiff) || dayDiff < 0 || dayDiff > 7) {
        if (today.getFullYear() === date.getFullYear()) {
          return time.substring(5, 10)
        } else {
          return time.substring(0, 10)
        }
      }
      return (
        (dayDiff === 0 &&
          ((diff < 60 && '刚刚') ||
            (diff < 120 && '1分钟前') ||
            (diff < 3600 && Math.floor(diff / 60) + '分钟前') ||
            (diff < 7200 && '1小时前') ||
            (diff < 86400 && Math.floor(diff / 3600) + '小时前'))) ||
        (dayDiff === 1 && '昨天') ||
        (dayDiff <= 7 && dayDiff + '天前')
      )
    },
    showMsg(id) {
      const msg = this.list.find(msg => msg.id === id)
      if (msg !== undefined) {
        this.markMsg = msg
        this.canSub()
        if (msg.isRead === 0) {
          this.list.find(msg => msg.id === id).isRead = 1
          teacherApi.setRead(id).then(res => {
            store.dispatch('ReduceMsgNum')
            console.log('已设置' + id + '为已读')
          }).catch(error => {
            console.log(error)
          })
        }
        if (msg.type === 0) {
          this.content = msg.content
          this.showNotice = true
        } else if (msg.type === 1) {
          this.markRequest.replyId = msg.content.substring(0, 19)
          this.markRequest.studentId = msg.content.substring(19, 38)
          this.content = msg.content.substring(38)
          this.showMark = true
        }
      }
    },
    submitMark() {
      if (!this.canSub()) {
        this.$message({
          message: '评分已过期',
          type: 'warning'
        })
      } else {
        teacherReplyApi.mark(this.markRequest).then(res => {
          this.showMark = false
          this.subFlag = false
          this.$message({
            message: res.result,
            type: 'success'
          })
        }).catch(error => {
          console.log(error)
        })
      }
    },
    canSub() {
      const date = new Date(this.markMsg.createTime)
      const now = new Date()
      const diff = (now.getTime() - date.getTime()) / 1000
      if (diff >= 60 * 30) {
        this.subFlag = true
        this.markTitle = '评分已过期'
        return false
      }
      this.subFlag = false
      this.markTitle = ''
      return true
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card:hover {
  color: rgb(64, 158, 255);
}
</style>
